<template>
  <TopHeaderNav />
  <div class="content-wrapper">
    <div class="page-content">
      <el-row>
        <el-col :span="13" :offset="4">
          <div class="about-content">
            <h1>关于我</h1>
            <p>最后更新于 2021.12.20 </p>
            <el-divider class="m-10"></el-divider>
            <p>首先欢迎光临我的博客&nbsp;<i class="em em-kissing_heart"></i>&nbsp;&nbsp;我是一只<span class="discard">90后</span> 差一点就是95后的 <span class="discard">JAVA</span> CV 工程师~ <i class="em em-stuck_out_tongue"></i> &nbsp;&nbsp;<span class="heavy">重度科幻迷</span>、《三体》一直是我心目中的神作！</p>
            <!-- <p>我热爱计算机 <span class="discard">绝对不是为了装逼</span> 我觉得说程序员都有点闷骚是对的 <span class="discard">我不是</span></p> -->
            <p>我 <span class="discard">不</span> 喜欢格子衫，也不秃头 <span class="discard">还不够强</span> ，喜欢<span class="heavy">吃！吃！吃！</span> 中度社恐患者 <i class="em em-face_with_raised_eyebrow"></i> <span class="discard">所以我是个标准肥宅？？？</span></p>
            <p>我热爱 GAME 我觉得游戏也是一种艺术 <i class="em em-wink"></i> 小目标是 <span class="discard">做</span> 玩一款太空题材的游戏，<span class="discard">我有在看Unity！</span><i class="em em-joy"></i> 现在还在玩别人的游戏的阶段</p>
            <p style="font-weight: bold;">吃饭水平的话 我大概都会 <sub><small>个半桶水</small></sub> 比如 JAVA、Spring 全家桶 <span class="discard">就指望你们吃饭了！</span>、C# <span class="discard">本专业出生，半途出家JAVA</span></p>
            <p>细分一下的话 <span class="heavy">Spring MVC、Boot、Cloud</span> 等等，<span class="heavy">Nacos、Seata、Sentinel、<span class="discard">Dubbo</span></span>各种中间件 比如 <span class="heavy">Redis RocketMQ</span></p>
            <p style="font-weight: bold;">前端的话 <span class="discard">被迫的</span> 用过 VUE <span class="discard">就是用它做的这个博客</span>、React <span class="discard">被安利用VUE了</span></p>
            <p style="font-weight: bold;">服务器运维方面的话 <span class="discard">被迫的</span> 大家都会接触的LINUX、Docker容器、搭搭Redis集群、搞搞 Jenkins 持续集成、部署项目什么的。毕竟都得靠自己呀! <i class="em em-joy"></i></p>
            <p>硬件方面还玩过树莓派 <span class="discard">绝对不是因为续费不起服务器</span> 原本想着是拿来做服务器，后来因为IP6网络 80端口被墙就吃灰了</p>
            <el-divider class="m-10"></el-divider>
            <h1>关于博客</h1>
            <p>最后更新于 2021.12.20 </p>
            <el-divider class="m-10"></el-divider>
            <p>这个博客的诞生历程十分坎坷，最开始想要搭建一个博客的时候是在2020年底，那时候看的<span class="heavy">别人家</span> <span class="discard">别人家的最香</span> 的博客的时候萌生的想法</p>
            <p>一方面想做一个从0到1的项目<span class="heavy">练手</span>、另一方面也想记录自己的<span class="heavy">学习历程</span></p>
            <p>当时找了个前端模板就开整了，写着写着是觉得哪哪不满意，干脆整个项目删了重新建了这个项目</p>
            <p>现在这个博客项目是2021年4 5月份<span class="discard">记不清了</span>的时候搭建的，微服务架构，一边搬砖一边用各种碎片时间慢慢写出来的。下面是用到的所有技术栈</p>
            <p><span class="heavy indent-title">前端 <i class="em em-pager"></i>：</span> VUE-Cli3脚手架搭建的 VUE3 + Element-Plus项目、Axios</p>
            <p><span class="heavy indent-title">后端 <i class="em em-computer"></i>：</span> SpringCloud、Gateway、CloudAlibaba、Nacos（注册与配置中心）、Druid、MybatisPlus、Jedis</p>
            <p><span class="heavy indent-title">中间件 <i class="em em-recycle"></i>：</span> Redis 集群、RocketMQ</p>
            <p><span class="heavy indent-title">其他 <i class="em em-gear"></i>：</span> Gitee + Jenkins + Gradle 持续集成、Lombok、Guava、OKHttp3 等等</p>
            <el-divider class="m-10"></el-divider>
            <p>最后如果你有什么建议或者有什么想说的欢迎在下方留言哦~ <i class="em em-kissing_heart"></i></p>
            <p>最后的最后，祝你<span class="heavy">一帆风顺，万事如意！</span></p>
            <el-divider class="m-10"></el-divider>
          </div>
          <div class="article-comment">
            <h1>留下点什么</h1>
            <div class="comment-form p-10" id="articleCommentBox"></div>
            <span class="mt-10" style="padding-left: 10px;display: block;">已有 <span style="font-size: 28px;">{{messageCount}}</span> 条留言</span>
            <el-divider></el-divider>
            <div class="comment-list" v-loading="commentLoading">
              <template v-if="commentPageResult&&commentPageResult.records&&commentPageResult.records.length > 0" v-for="comment in commentPageResult.records" :key="comment">
                <div class="comment-item">
                  <div class="user-face">
                    <div v-if="comment.commentator!=null&&comment.commentator.avatarUrl" class="avatar" style="background: none;">
                      <img :src="comment.commentator.avatarUrl" />
                    </div>
                    <div v-else class="avatar">
                    </div>
                  </div>
                  <div class="comment-con">
                    <div class="user" v-html="comment.commentator?comment.commentator.name:'\<small class=\'text-muted\'\>'+comment.commentIp+'\</small\>'"></div>
                    <div class="comment-text" v-html="comment.commentContent"></div>
                    <div class="comment-info">
                      <i class="el-icon-time"></i> {{Utils.formatDate(comment.createTime,'yyyy-MM-dd hh:mm')}} &nbsp;&nbsp;
                      <i class="el-icon-thumb" :class="{thumbed : comment.thumbed}" @click="toggleCommentThumb(comment.id)" :id="'thumb_comment_'+comment.id">&nbsp;{{comment.thumbCount}}</i>
                      <a href="javascript:;" @click="replyComment(comment)" class="reply-btn">回复</a>
                    </div>
                    <div class="comment-form reply-box" :id="'reply_'+comment.id" style="height:0;"></div>
                  </div>
                  <template v-if="comment.replyList&&comment.replyList.length > 0">
                    <div class="reply-list">
                      <div class="reply-item" v-for="reply in comment.replyList" :key="reply">
                        <div class="user-face">
                          <div v-if="reply.commentator!=null&&reply.commentator.avatarUrl!=null" class="avatar" style="background: none;">
                            <img :src="reply.commentator.avatarUrl" />
                          </div>
                          <div v-else class="avatar">
                          </div>
                        </div>
                        <div class="reply-con">
                          <div class="user" v-html="reply.commentator?reply.commentator.name:'\<span class=\'text-muted\'\>'+reply.commentIp+'\</span\>'">
                          </div>
                          <small class="ml-5" v-if="reply.parentComment!=null">回复 @{{reply.parentComment.commentator?reply.parentComment.commentator.name:reply.parentComment.commentIp}}</small>
                          <div class="reply-text" v-html="reply.commentContent"></div>
                          <div class="reply-info">
                            <i class="el-icon-time"></i> {{Utils.formatDate(reply.createTime,'yyyy-MM-dd hh:mm')}} &nbsp;&nbsp;
                            <i class="el-icon-thumb" :class="{thumbed : reply.thumbed}" @click="toggleCommentThumb(reply.id)" :id="'thumb_comment_'+reply.id">&nbsp;{{reply.thumbCount}}</i>
                            <a href="javascript:;" @click="replyComment(reply)" class="reply-btn">
                              回复
                            </a>
                          </div>
                          <div class="comment-form reply-box" :id="'reply_'+reply.id" style="height:0;"></div>
                        </div>
                      </div>
                      <div class="load-more" :id="'loadMoreHolder_'+comment.id" @click="loadMoreReply(comment)" :hasMore="comment.hasMoreReply" :curPage="comment.curReplyPage">
                        <template v-if="comment.hasMoreReply">
                          <i class="el-icon-caret-bottom"></i>
                          <span class="load-more-text">&nbsp;&nbsp;更多回复</span>
                        </template>
                        <template v-else>
                          <span class="no-more-text">没有更多了</span>
                        </template>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
              <el-empty v-else description="还没有人评论哦~赶紧来抢沙发吧">
              </el-empty>
              <template v-if="!inLoadingMore&&hasMoreComment">
                <div class="load-more">
                  向下滚动加载更多
                </div>
              </template>
              <template v-if="inLoadingMore&&hasMoreComment">
                <div class="load-more mt-10">
                  <i class="el-icon-loading"></i> 正在加载...
                </div>
              </template>
              <template v-if="!hasMoreComment">
                <div class="load-more disabled">
                  <span class="no-more-text">已经到底啦...</span>
                </div>
              </template>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
  import CommentBox from '@/components/comment/CommentBox'
  import TopHeaderNav from '@/components/TopHeaderNav'
  import goTop from '@/plugins/GoTop'
  import { createApp, h } from 'vue'
  export default {
    components: {
      TopHeaderNav
    },
    data() {
      this.$axios.get('/api/comment-service/comment/statMessage').then(count => {
        this.messageCount = count;
      });
      this.$nextTick(function () {
        goTop.init();
        this.loadCommentBox("articleCommentBox"); // 加载评论组件到文章评论表单
        this.loadingComments(); // 加载评论列表
        // 设置滚动加载
        let loadMoreComments = this.loadMoreComments;
        $(window).scroll(function () {
          let scrollTop = $(this).scrollTop();
          let scrollHeight = $(document).height();
          let windowHeight = $(this).height();
          if (scrollTop + windowHeight >= (scrollHeight - 10)) {
            setTimeout(() => {
              loadMoreComments();
            }, 300);
          }
        })
      })
      return {
        messageCount: 0,
        commentLoading: true,
        inLoadingMore: false,
        hasMoreComment: true,
        article: {},
        commentPageResult: {}
      }
    },
    methods: {
      loadingComments() {
        this.$axios.get('/api/comment-service/comment/pageByQuery', {
          type: 'message'
        }).then(resultData => {
          this.commentPageResult = resultData;
          setTimeout(() => {
            this.commentLoading = false;
          }, 1000);
        });
      },
      // 在指定 dom 中加载评论组件 replyComment 若是回复评论则传入当前回复的评论对象
      loadCommentBox(domId, replyComment) {
        const commentSubmitCallBack = this.commentSubmitCallBack;
        const replySubmitCallBack = this.replySubmitCallBack;
        createApp({
          render() {
            return h(CommentBox, {
              domId: domId,
              replyComment: replyComment ? replyComment : {},
              commentSubmitCallBack: commentSubmitCallBack,
              replySubmitCallBack: replySubmitCallBack
            });
          }
        }).mount("#" + domId);
      },
      commentSubmitCallBack(domId, commentId) {
        // 文章评论成功回调
        if (domId) {
          this.loadCommentBox(domId);
        }
        this.loadingComments();
      },
      replySubmitCallBack(domId, comment, replyComment) {
        // 回复成功回调
        if (domId) {
          $('#' + domId).css('heihgt', '0').empty();
        }
        this.loadingComments();
      },
      replyComment(comment) {
        let commentId = comment.id;
        $('.reply-box').css('height', '0');
        $("#reply_" + commentId).css('height', '280px');
        this.loadCommentBox('reply_' + commentId, comment);
      },
      loadMoreReply(comment) {
        if (comment.hasMoreReply) {
          let $loadHolder = $("#loadMoreHolder_" + comment.id);
          $loadHolder.addClass("disabled")
            .find('i.el-icon-caret-bottom').hide()
            .find('span.load-more-text').hide();
          $loadHolder.append('<span class="loading-wrapper">&nbsp;<i class="el-icon-loading"></i>&nbsp;加载中...</span>');
          let pageNum = comment.curReplyPage ? comment.curReplyPage + 1 : 2;
          this.$axios.get('/api/comment-service/comment/pageCommentReply', {
            commentId: comment.id,
            pageNum: pageNum
          }).then((replyList) => {
            replyList.forEach((item, index) => {
              comment.replyList.push(item);
            });
            comment.curReplyPage = pageNum;
            setTimeout(() => {
              if (replyList.length < 3) {
                comment.hasMoreReply = false;
              }
              $loadHolder.removeClass("disabled")
                .find('i.el-icon-caret-bottom').show()
                .find('span.load-more-text').show();
              $loadHolder.find('span.loading-wrapper').remove();
            }, 1000);
          }).catch(() => {});
        }
      },
      loadMoreComments() {
        if (!this.inLoadingMore && this.hasMoreComment && this.commentPageResult.current) {
          this.inLoadingMore = true;
          let pageNum = this.commentPageResult.current + 1;
          this.$axios.get('/api/comment-service/comment/pageByQuery', {
            type: 'message',
            current: pageNum
          }).then(resultData => {
            this.inLoadingMore = false;
            this.commentPageResult.current = resultData.current;
            this.commentPageResult.total = resultData.total;
            this.commentPageResult.size = resultData.size;
            this.hasMoreComment = resultData.total > (resultData.size * resultData.current)
            resultData.records.forEach((item, index) => {
              this.commentPageResult.records.push(item);
            })
          });
        }
      }
    }
  }
</script>